.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;

    .win {
        position: fixed;
        left: calc((100% - 93%) / 2);
        bottom: 110rpx;
        width: 93%;

    }
}

.customer-service {
    width: 750rpx;
    /* 固定聊天框宽度，适配设计图 */
    margin: 0 auto;
    /* 居中 */
    height: 100vh;
    background-color: #F2F3F8;
    display: flex;
    flex-direction: column;
    position: relative;

    /* 聊天内容区域 */
    .chat-content {
        height: calc(100vh - 200rpx);
        padding: 20rpx;

        .chat-content-inner {
            display: flex;
            flex-direction: column;
        }

        /* 每条聊天消息容器 */
        .chat-message {
            display: flex;
            margin-bottom: 32rpx;
            max-width: 95%;

            /* 头像样式 */
            .chat-avatar {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                overflow: hidden;
                flex-shrink: 0;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            /* 他人消息头像居左 */
            .left-avatar {
                margin-right: 20rpx;
            }

            /* 自己消息头像居右 */
            .right-avatar {
                margin-left: 20rpx;
            }

            /* 自己的消息整体右对齐 */
            &.mine {
                justify-content: flex-end;
            }

            /* 他人的消息整体左对齐 */
            &.other {
                justify-content: flex-start;
            }

            /* 订单消息特殊样式 */
            &.order-message {
                max-width: 90%;
                margin-left: auto;
                margin-right: auto;
            }

            /* 普通文本气泡 */
            .chat-bubble {
                padding: 24rpx 32rpx;
                border-radius: 26rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 30rpx;
                color: #0E1C37;
                line-height: 48rpx;
                word-wrap: break-word;
                /* 超出自动换行 */
                white-space: pre-wrap;
                /* 保留换行符 */
                border: 1rpx solid #eee;
                box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
            }
        }

        /* 订单消息卡片样式 */
        .order-card {
            padding: 24rpx;
            border: 2rpx solid #EDEDED;
            background: #FFFFFF;
            border-radius: 26rpx;
            margin-bottom: 24rpx;
            max-width: calc(80% - 30rpx);
            /* 减去头像宽度空间 */
            margin-left: auto;
            margin-right: auto;

            .order-info {
                .order-top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 12rpx;

                    // 状态标签
                    .order-status-tag {
                        min-width: 50rpx;
                        text-align: center;
                        font-size: 24rpx;
                        padding: 8rpx 8rpx;
                        border-radius: 5rpx;
                        margin-right: 16rpx;
                    }

                    .order-title {
                        font-size: 28rpx;
                        font-weight: 600;
                        color: #333;
                    }

                    .status-img {
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 14rpx;
                    }
                }

                .order-middle {
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 12rpx;

                    .people-time {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 22rpx;
                        color: #888B9A;
                        margin-right: 12rpx;
                        background: #EEF2F3;
                        border-radius: 10rpx;
                        padding: 8rpx 12rpx;
                        margin-bottom: 10rpx;
                    }
                }

                .order-bottom {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 24rpx;
                    color: #999;
                    margin-bottom: 12rpx;

                    .order-bottom-vertical {
                        display: flex;
                        flex-direction: column;
                    }

                    .address {
                        flex: 1;
                        margin-bottom: 8rpx;
                    }

                    .distance {
                        margin-right: 12rpx;
                    }

                    .arrow {
                        width: 36rpx;
                        height: 36rpx;
                    }
                }

                .salary {
                    display: flex;
                    align-items: center;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #F71737;
                    margin: 35rpx 0 18rpx;

                    .arrow {
                        width: 36rpx;
                        height: 36rpx;
                        margin-left: 18rpx;
                    }
                }
            }
        }

        .arrow-right {
            width: 30rpx;
            height: 30rpx;
        }

        .chat-bubble {
            max-width: 60%;
            padding: 16rpx 24rpx;
            border-radius: 16rpx;
            color: #333;
            line-height: 1.4;
            word-wrap: break-word;
        }
    }


    .send-order-btn {
        position: fixed;
        bottom: 160rpx;
        left: 30rpx;
        width: 142rpx;
        height: 58rpx;
        background: #FEFEFE;
        box-shadow: 0rpx 2rpx 7rpx 0rpx rgba(96, 96, 96, 0.2);
        border-radius: 10rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 28rpx;
        color: #0E1C37;
        display: flex;
        align-items: center;
        justify-content: center;

        // 添加按钮点击效果
        // &:active {
        //     background-color: #3dc954;
        // }
    }

    // 输入与操作栏
    .input-bar {
        display: flex;
        align-items: center;
        padding: 30rpx 28rpx; // 调整内边距
        background-color: #fff;
        border-top: 2rpx solid #f5f5f5;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
        flex: 1; // 让输入容器占满剩余空间




        .chat-input {
            flex: 1; // 输入框占满容器空间
            height: 76rpx;
            padding: 0 28rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 2rpx 7rpx 0rpx rgba(96, 96, 96, 0.2);
            border-radius: 16rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 28rpx;
            color: #888B9A;
            border: none;

            // 修复输入框获取焦点时的样式
            &:focus {
                outline: none;
                background-color: #eeeeee;
            }
        }

        .icons-container {
            display: flex;
            align-items: center;
            margin-left: 16rpx;
        }

        .emoji-icon,
        .add-icon {
            width: 48rpx;
            height: 48rpx;
            margin-left: 16rpx;
        }

        // 添加发送按钮样式
        .send-btn {
            width: 100rpx;
            height: 60rpx;
            background: #BEFF33;
            border-radius: 10rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 26rpx;
            color: #0E1C37;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 16rpx;

            // 添加点击效果
            // &:active {
            //     background-color: #0066cc;
            // }
        }
    }


}